import React, { PureComponent } from 'react';
// 引入框架
import { message, Modal, Input, Button } from 'antd';
// 发送axios
import Axios from 'axios';
// 引入接口
import { webSite } from '../website';
// 引入样式
import './scss/lightMusic.scss';
// 切换音乐时的回调
// 引入仓库
import store from '../store/index';
const success = (text) => {
  message.success({
    content: text,
    className: 'custom-LightMusic',
    maxCount: 1,
  });
};
export default class LightMusic extends PureComponent {
  constructor() {
    super();
    this.state = {
      // 选项卡
      index: 1,
      current: ['播放器', '我的收藏', '音乐推荐', '歌曲搜索'],
      // 音乐是否播放
      isAutoPlay: false,
      // 切换音乐播放方式
      lightOrder: 0,
      // 音乐列表
      MusicList: [],
      // 音乐是否播放
      SetAutoPlay: false,
      // 首次进入时的音乐
      httpMusci: '',
      // 我的收藏第几个颜色会发生改变
      indexMusicList: '',
      // 存储的下标
      GetindexMusicList: 0,
      visible: false,
      // 点击操作的下标
      operation: 0,
      // 搜索页面的内容切换
      isSearch: true,
      // 搜索音乐框的input值
      inputMusic: '',
      // 专辑封面
      Album: 'https://s4.music.126.net/style/web2/img/default/default_album.jpg',
      // 歌词
      lyric: '',
      // 歌曲进度
      lyricSpeed: 0,
      // 搜索的个数
      numberMusic: 20,
      // 存点击加载更多的值
      inputM: '',
      // 音乐推荐页面内容的切换
      recommend: true,
      // 历史记录
      historyList: [],
    };
    // 定时器
    this.time = null;
    // 用来显示歌词的
    this.lyricGec = {
      fuyi: '',
      geciyi: '',
      gecier: '',
      gecisan: '',
      gecisi: '',
      geciwu: '',
      geciliu: '',
    };
    // state的写法
    this.unSubscribe = store.subscribe(() => {
      // 强制更新
      this.forceUpdate();
    });
  }
  // input的输入事件
  handleInputM = ({ target }) => {
    let { name, value } = target;
    // 设置input和state同步
    this.setState({
      [name]: value,
    });
  };

  // 搜索音乐的按键
  btnMusic = () => {
    // 去空格
    let inputMusic = this.state.inputMusic.replace(/\s+/g, '');
    if (!inputMusic) {
      success('请输入搜索内容');
      return;
    }
    // 发送请求获取数据
    Axios.create({
      baseURL: `${webSite}:3003`,
    })
      .post('/GetSMusic', { inputMusic: inputMusic, numberMusic: 20 })
      .then((err) => {
        if (err.data.code === 'M0003') {
          // 获取到搜索音乐的所有数据
          let songs = err.data.data.result.songs;
          // 从写数据结构
          // 把数据转成我需要的格式
          let newSongs = [];
          for (let index = 0; index < songs.length; index++) {
            const element = songs[index];
            let newObj = {};
            newObj.musicId = element.id;
            newObj.musicUser = element.name;
            newObj.musicAuthor = element.artists[0].name;
            newSongs.push(newObj);
          }
          this.setState({
            // 搜索页面切换成搜索框
            isSearch: false,
            // 把推荐音乐界面换成图片样式
            recommend: true,
            inputM: inputMusic,
            // 清空输入框
            inputMusic: '',
            // 把请求回来的列表赋值给页面音乐的主列表
            MusicList: newSongs,
            // 清空歌曲下标
            indexMusicList: '',
          });
        }
      })
      .catch(() => {
        // 网络消失时提示
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      });
  };

  //网页加载的logo
  openMessage = () => {
    message.loading({
      content: '同步账号歌单中...',
      duration: 0.3,
    });
  };

  componentWillUnmount() {
    this.unSubscribe();
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    };
    // 显示悬浮音乐
    let HomeAudioKong = document.getElementsByClassName('HomeAudioKong')[0];
    HomeAudioKong.style.display = 'block';
  }

  // 网页加载请求数据
  componentDidMount() {
    let { userId } = store.getState().reducer;
    // 隐藏悬浮音乐
    let HomeAudioKong = document.getElementsByClassName('HomeAudioKong')[0];
    HomeAudioKong.style.display = 'none';
    // 暂停音乐
    let AudioHome = document.getElementById('AudioHome');
    AudioHome.pause();
    // 防止用户手动清除sessionStorage
    if (userId) {
      Axios.create({
        baseURL: `${webSite}:3003`,
      })
        .post('/lightMusic', { id: userId })
        .then((err) => {
          if (err.data.code === 'M0001') {
            // 用户在第一次进入还没有账号信息时发出消息
            success('您的收藏会同步到账号');
          } else if (err.data.code === 'M0002') {
            // 开局一个酷炫的同步消息
            this.openMessage();
            // 往本都存储一份
            sessionStorage.setItem('MusicList', JSON.stringify(err.data.data));
            // 把从服务器拿到的歌曲数据同步到页面上
            this.setState({
              MusicList: err.data.data,
            });
            return;
          }
          // 没有返回也储存一个 []
          sessionStorage.setItem('MusicList', JSON.stringify([]));
        })
        .catch(() => {
          message.error({ content: '网络错误', className: 'bulletChatMessage' });
        });
    }
  }

  // 选项卡的class
  setClass = (index) => {
    return index === this.state.index
      ? 'lightMusic_head_li lightMusicActive'
      : 'lightMusic_head_li';
  };

  //选项卡的内容
  truePlay = () => {
    let index = this.state.index;
    if (index === 0) {
      // 播放器页面
      return this.lightMusicPlayer();
    } else if (index === 1) {
      // 我的收藏页面
      return this.lightMusicPlaying();
    } else if (index === 2) {
      // 音乐列表页面
      return this.lightMusicPlaylist();
    } else if (index === 3) {
      // 搜索音乐页面
      return this.lightMusicSong();
    }
  };
  lightMusicPlayer = () => {
    // 播放器页面
    return (
      <li className="lightMusic_body_li">
        <div className="lightMusic_body_div">
          <img src={this.state.Album} alt="专辑" />
          <span className="lightMusic_body_div_span"></span>
        </div>
        <ul className="lightMusic_body_body">
          <li dangerouslySetInnerHTML={{ __html: this.lyricGec.fuyi }} />
          <li dangerouslySetInnerHTML={{ __html: this.lyricGec.geciyi }} />
          <li dangerouslySetInnerHTML={{ __html: this.lyricGec.gecier }} />
          <li
            className="lightMusic_body_body_h1"
            dangerouslySetInnerHTML={{ __html: this.lyricGec.gecisan }}
          />
          <li dangerouslySetInnerHTML={{ __html: this.lyricGec.gecisi }} />
          <li dangerouslySetInnerHTML={{ __html: this.lyricGec.geciwu }} />
          <li dangerouslySetInnerHTML={{ __html: this.lyricGec.geciliu }} />
        </ul>
      </li>
    );
  };
  // 歌曲的渲染函数
  lyric = () => {
    const _this = this;
    // 设置一个time 为 0
    if (!localStorage.time) {
      localStorage.time = 0;
    }
    // shijianshuzu 存时间
    // gecishuzu   存歌词
    let shijianshuzu = [];
    let gecishuzu = [];
    function parse(lrc) {
      let str = lrc.split('[');
      //因为str[0]="",所以跳过它
      for (let i = 1; i < str.length; i++) {
        let shijian = str[i].split(']')[0];
        let geci = str[i].split(']')[1];
        // shijian  分离出来的时间
        //  geci   分离出来的歌词
        let fen = shijian.split(':')[0];
        let miao = shijian.split(':')[1];
        //xx:xx.xx 时间转换成总的秒数
        let sec = parseInt(fen) * 60 + parseInt(miao);
        //存时间
        shijianshuzu[i - 1] = sec - localStorage.time;
        //存歌词
        gecishuzu[i - 1] = geci;
      }
      // 赋值函数
      updategeci();
    }
    parse(this.state.lyric);

    //更新歌词
    function updategeci() {
      //显示了六行歌词，每一行分别改变innerHTML
      //由歌词时间计算出i，得到现在应该显示哪部分歌词
      //这函数下面有介绍
      let i = getcurrent();
      //如果gecishuzu[i-2]定义了，就显示，没定义，就不显示
      //下面几个类似的if-else结构类似。
      if (gecishuzu[i - 4]) {
        _this.lyricGec.fuyi = gecishuzu[i - 4];
      } else {
        _this.lyricGec.fuyi = '&nbsp;';
      }
      if (gecishuzu[i - 3]) {
        _this.lyricGec.geciyi = gecishuzu[i - 3];
      } else {
        _this.lyricGec.geciyi = '&nbsp;';
      }
      if (gecishuzu[i - 2]) {
        _this.lyricGec.gecier = gecishuzu[i - 2];
      } else {
        _this.lyricGec.gecier = '&nbsp;';
      }
      if (gecishuzu[i - 1]) {
        _this.lyricGec.gecisan = gecishuzu[i - 1];
      } else {
        _this.lyricGec.gecisan = '&nbsp;';
      }
      if (gecishuzu[i]) {
        _this.lyricGec.gecisi = gecishuzu[i];
      } else {
        _this.lyricGec.gecisi = '&nbsp;';
      }
      if (gecishuzu[i + 1]) {
        _this.lyricGec.geciwu = gecishuzu[i + 1];
      } else {
        _this.lyricGec.geciwu = '&nbsp;';
      }
      if (gecishuzu[i + 2]) {
        _this.lyricGec.geciliu = gecishuzu[i + 2];
      } else {
        _this.lyricGec.geciliu = '&nbsp;';
      }
    }
    //将歌曲实际播放的时间，和我们自己的歌词的时间，进行比较，算出现在应该显示的歌词
    function getcurrent() {
      let i = 0;
      for (i = 0; i < shijianshuzu.length; i++) {
        //数和undefined比较，undefined要大些。
        if (shijianshuzu[i] >= _this.state.lyricSpeed) {
          return i;
        }
      }
      return i - 1;
    }
  };

  // 下载
  downloadId = (id) => {
    Axios.create({
      baseURL: `${webSite}:3003`,
    })
      .post('/gethttpMusci', { id })
      .then((err) => {
        if (err.data.code === 'M0003') {
          let url = err.data.url;
          let date = Date.now();
          var a = document.createElement('a');
          a.download = `${date}.mp3`; //下载的文件名，默认是'下载'
          a.href = url;
          a.target = '_blank';
          document.body.appendChild(a);
          a.click();
          a.remove(); //下载之后把创建的元素删除
        }
      })
      .catch(() => {
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      });
  };

  // 我的收藏页
  lightMusicPlaying = () => {
    let { userId } = store.getState().reducer;
    // 发送一次请求，获取收藏页数据
    // 对比本地存储的数组和当前使用的数组是否一致
    // 一致就不再发送请求，不一致就刷新
    if (!userId) {
      // 用户去掉了sessionStorage就返回主页
      this.props.history.replace('/');
      return;
    }
    if (this.state.MusicList.length !== 0) {
      if (JSON.parse(sessionStorage.getItem('MusicList')).length !== this.state.MusicList.length) {
        Axios.create({
          baseURL: `${webSite}:3003`,
        })
          .post('/lightMusic', { id: userId })
          .then((err) => {
            if (err.data.code === 'M0001') {
              // 用户在第一次进入还没有账号信息时发出消息
              success('您的收藏会同步到账号');
              this.setState({
                MusicList: [],
                isSearch: true,
                // 设置音乐推荐页面的展示图
                recommend: true,
              });
            } else if (err.data.code === 'M0002') {
              // 把从服务器拿到的歌曲数据同步到页面上
              this.setState({
                MusicList: err.data.data,
                indexMusicList: '',
                isSearch: true,
                // 设置音乐推荐页面的展示图
                recommend: true,
              });
              sessionStorage.setItem('MusicList', JSON.stringify(err.data.data));
            }
          })
          .catch(() => {
            message.error({ content: '网络错误', className: 'bulletChatMessage' });
          });
      }
    }
    //    音乐列表      音乐的下标    点击操作的下标
    let { MusicList, indexMusicList, operation } = this.state;
    return (
      <li className="lightMusic_body_li">
        {/* 点击操作时的弹出框 */}
        <Modal
          visible={this.state.visible}
          onCancel={this.handleCancel}
          centered={true}
          footer={null}
          bodyStyle={{
            width: '20vw',
            height: '20vh',
          }}>
          <div className="Music_download">
            <div className="Music_download_left">
              <p>歌名：</p>
              <p>歌手：</p>
              <p>操作：</p>
            </div>
            {/* 操作页面的内容 */}
            <div className="Music_download_right">
              <p>{MusicList.length === 0 ? '' : MusicList[operation].musicUser}</p>
              <p>{MusicList.length === 0 ? '' : MusicList[operation].musicAuthor}</p>
              <p>
                <b
                  onClick={() =>
                    this.downloadId(MusicList.length === 0 ? '' : MusicList[operation].musicId)
                  }
                  style={{ color: '#3e98f0' }}>
                  下载
                </b>
                {/* 传歌曲id到移除歌曲的函数 */}
                <span
                  onClick={() =>
                    this.onClickDelete(MusicList.length === 0 ? '' : MusicList[operation].musicId)
                  }>
                  移出
                </span>
              </p>
            </div>
          </div>
        </Modal>
        <ul className="lightMusic_body_li_Playing">
          <li className="lightMusic_Playing">
            <h3 style={{ textAlign: 'center' }}>歌曲</h3>
            <h3>歌手</h3>
          </li>
          {/* 歌曲列表 */}
          {MusicList.length === 0 ? (
            <li className="lightMusic_Playing_list" style={{ fontSize: '20px' }}>
              可能是个假列表，什么也没有~~
            </li>
          ) : (
            MusicList.map((list, index) => {
              return (
                <li
                  className={
                    indexMusicList === index
                      ? 'lightMusic_Playing_list lightMusic_Playing_list_Active'
                      : 'lightMusic_Playing_list'
                  }
                  onClick={() => this.TurnMusic(index)}
                  key={index}>
                  <span className="lightMusic_list_num">
                    {indexMusicList === index ? '' : index + 1}
                  </span>
                  <span className="lightMusic_music_name">{list.musicUser}</span>
                  <span className="lightMusic_auth_name">{list.musicAuthor}</span>
                  <span
                    className="lightMusic_list-mobile-menu"
                    onClick={(e) => this.operation(e, index)}></span>
                </li>
              );
            })
          )}
        </ul>
      </li>
    );
  };
  // 移出音乐函数
  onClickDelete = (MusicId) => {
    let { userId } = store.getState().reducer;
    const _this = this;
    // 发送移出音乐的请求
    if (userId) {
      Axios.create({
        baseURL: `${webSite}:3003`,
      })
        .post('/DeleteMusic', { id: userId, MusicId: MusicId })
        .then((err) => {
          if (err.data.code === 'M0006') {
            // 删除之后关闭对话框
            _this.setState({
              visible: false,
              MusicList: err.data.data,
              operation: 0,
            });
          }
        })
        .catch(() => {
          message.error({ content: '网络错误', className: 'bulletChatMessage' });
        });
    }
  };
  // 操作函数
  operation = (e, index) => {
    // 去掉冒泡事件
    e.stopPropagation();
    this.setState({
      visible: true,
      operation: index,
    });
  };

  // 关闭下载对话框
  handleCancel = (e) => {
    e.stopPropagation();
    this.setState({
      visible: false,
    });
  };
  // 跳转到正在播放
  upPlay = () => {
    this.setState({
      index: 0,
    });
  };
  // 根据音乐分类来判断是否返回什么类型的音乐渲染页面
  MusicClass = (cla) => {
    const _this = this;
    Axios.create({
      baseURL: `${webSite}:3003`,
    })
      .post('/MusicClass', { cla: cla })
      .then((err) => {
        if (err.data.code === 'M0099') {
          // 返回数据切换页面显示
          _this.setState({
            recommend: false,
            // 得到的结果渲染到页面上
            MusicList: err.data.data,
            indexMusicList: '',
          });
        }
      })
      .catch(() => {
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      });
  };
  // 历史记录
  historyFun = () => {
    if (this.state.historyList.length !== 0) {
      this.setState({
        recommend: false,
        // 得到的结果渲染到页面上
        MusicList: this.state.historyList.reverse(),
        indexMusicList: '',
      });
    } else {
      message.info({ content: '暂无历史记录', className: 'bulletChatMessage' });
    }
  };
  // 推荐歌曲页面
  lightMusicPlaylist = () => {
    let { MusicList, indexMusicList } = this.state;
    return (
      <li className="lightMusic_body_li">
        <ul className="lightMusic_body_li_Playing">
          {this.state.recommend ? (
            <li>
              <ul className="lightMusic_body_recommend">
                <li>
                  <img src={this.state.Album} alt="正在播放" onClick={this.upPlay} />
                  <p>正在播放</p>
                </li>
                <li>
                  <img
                    src={require('./img/history.png')}
                    alt="历史记录"
                    onClick={this.historyFun}
                  />
                  <p>历史记录</p>
                </li>
                <li>
                  <img
                    src={require('./img/18708190348409091.jpg')}
                    alt="热歌榜"
                    onClick={() => this.MusicClass('rege')}
                  />
                  <p>云音乐热歌榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/18713687906568048.jpg')}
                    alt="新歌榜"
                    onClick={() => this.MusicClass('xinge')}
                  />
                  <p>云音乐新歌榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/19140298416347251.jpg')}
                    alt="华语金曲"
                    onClick={() => this.MusicClass('jinqu')}
                  />
                  <p>华语金曲榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/18878614648932971.jpg')}
                    alt="中国TOP排行榜"
                    onClick={() => this.MusicClass('paihang')}
                  />
                  <p>中国TOP排行榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/18967675090783713.jpg')}
                    alt="中国TOP排行榜"
                    onClick={() => this.MusicClass('paihang')}
                  />
                  <p>中国TOP排行榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/18696095720518497.jpg')}
                    alt="云音乐飙升榜"
                    onClick={() => this.MusicClass('biansheng')}
                  />
                  <p>云音乐飙升榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/18740076185638788.jpg')}
                    alt="网易原创歌曲榜"
                    onClick={() => this.MusicClass('yuanchuang')}
                  />
                  <p>网易原创歌曲榜</p>
                </li>
                <li>
                  <img
                    src={require('./img/2946691234868155.jpg')}
                    alt="吐血力荐音乐"
                    onClick={() => this.MusicClass('huanjiu')}
                  />
                  <p>吐血力荐音乐</p>
                </li>
                <li>
                  <img
                    src={require('./img/1416170990976003.jpg')}
                    alt="经典怀旧老歌"
                    onClick={() => this.MusicClass('laoge')}
                  />
                  <p>经典怀旧老歌</p>
                </li>
              </ul>
            </li>
          ) : MusicList.length === 0 ? (
            ''
          ) : (
            MusicList.map((list, index) => {
              return (
                <li
                  className={
                    indexMusicList === index
                      ? 'lightMusic_Playing_list lightMusic_Playing_list_Active'
                      : 'lightMusic_Playing_list'
                  }
                  onClick={() => this.TurnMusic(index)}
                  key={index}>
                  <span className="lightMusic_list_num">
                    {indexMusicList === index ? '' : index + 1}
                  </span>
                  <span className="lightMusic_music_name">{list.musicUser}</span>
                  <span className="lightMusic_auth_name">{list.musicAuthor}</span>
                  <span
                    className="lightMusic_auth_name_push"
                    onClick={(e) => this.addMusic(e, list)}>
                    添加
                  </span>
                </li>
              );
            })
          )}
        </ul>
      </li>
    );
  };
  // 歌曲搜索页面
  lightMusicSong = () => {
    let { MusicList, indexMusicList } = this.state;
    return (
      <li className="lightMusic_body_li">
        <ul className="lightMusic_body_li_Playing">
          {this.state.isSearch ? (
            // 搜索框
            <li className="lightMusic_body_li_Search">
              <Input
                placeholder="请输入音乐名称"
                className="musicInput"
                value={this.state.inputMusic}
                name="inputMusic"
                onChange={this.handleInputM}
                autoComplete="off"
                onPressEnter={this.btnMusic}
              />
              <span>所有音乐均来自互联网，网站不做任何收录</span>
              <Button type="primary" block onClick={this.btnMusic} className="musicButton">
                搜索
              </Button>
            </li>
          ) : // 搜索结果
          MusicList.length === 0 ? (
            ''
          ) : (
            MusicList.map((list, index) => {
              return (
                <li
                  className={
                    indexMusicList === index
                      ? 'lightMusic_Playing_list lightMusic_Playing_list_Active'
                      : 'lightMusic_Playing_list'
                  }
                  onClick={() => this.TurnMusic(index)}
                  key={index}>
                  <span className="lightMusic_list_num">
                    {indexMusicList === index ? '' : index + 1}
                  </span>
                  <span className="lightMusic_music_name">{list.musicUser}</span>
                  <span className="lightMusic_auth_name">{list.musicAuthor}</span>
                  <span
                    className="lightMusic_auth_name_push"
                    onClick={(e) => this.addMusic(e, list)}>
                    添加
                  </span>
                </li>
              );
            })
          )}
          {/* 加载更多 numberMusic*/}
          <li
            className="lightMusic_Playing_list"
            style={{ display: this.state.isSearch ? 'none' : 'block' }}
            onClick={this.onAddMusic}>
            点击加载更多~
          </li>
        </ul>
      </li>
    );
  };
  // 加载更多的函数
  onAddMusic = () => {
    this.setState({
      numberMusic: this.state.numberMusic + 10,
    });
    // 发送请求获取数据
    Axios.create({
      baseURL: `${webSite}:3003`,
    })
      .post('/GetSMusic', { inputMusic: this.state.inputM, numberMusic: this.state.numberMusic })
      .then((err) => {
        if (err.data.code === 'M0003') {
          // 获取到搜索音乐的所有数据
          let songs = err.data.data.result.songs;
          // 从写数据结构
          // 把数据转成我需要的格式
          let newSongs = [];
          for (let index = 0; index < songs.length; index++) {
            const element = songs[index];
            let newObj = {};
            newObj.musicId = element.id;
            newObj.musicUser = element.name;
            newObj.musicAuthor = element.artists[0].name;
            newSongs.push(newObj);
          }
          this.setState({
            // 把请求回来的列表赋值给页面音乐的主列表
            MusicList: newSongs,
          });
        }
      })
      .catch(() => {
        // 网络消失时提示
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      });
  };

  // 添加音乐的函数
  addMusic = (e, list) => {
    let { userId } = store.getState().reducer;
    e.stopPropagation();
    // 把音乐添加到歌曲列表
    Axios.create({
      baseURL: `${webSite}:3003`,
    })
      .post('/AddMusic', { MusicId: userId, MusicList: list })
      .then((err) => {
        // 用户第一次添加成功
        if (err.data.code === 'M0011') {
          message.success({ content: '添加成功', className: 'bulletChatMessage' });
        }
        // 用户好几次添加
        if (err.data.code === 'M0021') {
          message.success({ content: '添加成功', className: 'bulletChatMessage' });
        }
        // 防止用户多次添加
        if (err.data.code === 'M0031') {
          message.info({ content: '请勿重复添加', className: 'bulletChatMessage' });
        }
      })
      .catch(() => {
        message.error({ content: '网络错误', className: 'bulletChatMessage' });
      });
  };

  // 歌曲播放时的函数
  timeUpdateMusic = () => {
    const audio = document.getElementById('MusicAudioId');
    const MusciTop = document.getElementById('lightMusciBloss');
    // player.currentTime
    // 获取进度条的长度
    let audioWidth = document.getElementsByClassName('lightMusic_button_mkpgb');
    // 阻止因为找不到元素而报错
    if (audioWidth[0] === undefined) {
      return;
    }
    // 歌曲进入存入state
    this.setState(
      {
        lyricSpeed: audio.currentTime,
      },
      () => {
        // 开启歌词
        this.lyric();
      }
    );
    // 进度条长度同步歌曲进度条
    MusciTop.style.left =
      ((audio.currentTime / audio.duration) * 100 * audioWidth[0].offsetWidth) / 100 + 'px';
    // 已播放的进度条长度
    audioWidth[1].style.width = (audio.currentTime / audio.duration) * 95 + '%';
  };

  // 音乐结束执行
  EndedMusic = () => {
    // 根据是什么播放方式写
    if (this.state.lightOrder === 0) {
      // 列表循环
      // 调用开启音乐的方法
      if (this.state.indexMusicList + 1 < this.state.MusicList.length) {
        this.TurnMusic(this.state.indexMusicList + 1);
        // 判断歌曲是最后一个的时候就循环到一个
      } else {
        // 重头开始
        this.TurnMusic(0);
      }
    } else if (this.state.lightOrder === 1) {
      // 开启单曲循环
      this.TurnMusic(this.state.indexMusicList);
    } else if (this.state.lightOrder === 2) {
      // 开启随机播放
      let random = Math.floor(Math.random() * this.state.MusicList.length);
      this.TurnMusic(random);
    }
  };

  // 开启关闭音乐按钮
  lightPlay = (bloo) => {
    if (bloo) {
      this.setState({
        isAutoPlay: true,
        indexMusicList: this.state.GetindexMusicList,
      });
      // 开启音乐
      const audio = document.getElementById('MusicAudioId');
      // 这里点快了会报错
      // 设置一个半秒的延迟
      audio.play().catch(() => {
        message.info({ content: '歌曲需要缓冲', className: 'bulletChatMessage' });
      });
      // 获取音乐的播放进度
      this.timeUpdateMusic();
    } else {
      this.setState({
        isAutoPlay: false,
        // 置空
        indexMusicList: '',
      });
      // 暂停音乐
      const audio = document.getElementById('MusicAudioId');
      audio.pause();
    }
  };
  // 上一曲
  lightPrev = () => {
    if (this.state.indexMusicList - 1 >= 0) {
      this.TurnMusic(this.state.indexMusicList - 1);
      // 判断歌曲是最后一个的时候就循环到一个
    } else {
      // 重头开始
      this.TurnMusic(this.state.MusicList.length - 1);
    }
  };
  // 下一曲
  lightNext = () => {
    if (this.state.indexMusicList + 1 < this.state.MusicList.length) {
      this.TurnMusic(this.state.indexMusicList + 1);
      // 判断歌曲是最后一个的时候就循环到一个
    } else {
      // 重头开始
      this.TurnMusic(0);
    }
  };
  // 切换播放方式
  lightOrder = (index) => {
    if (index === 1) {
      this.setState({
        lightOrder: 2,
      });
      success('随机播放');
    } else if (index === 2) {
      this.setState({
        lightOrder: 0,
      });
      success('列表循环');
    } else {
      this.setState({
        lightOrder: 1,
      });
      success('单曲播放');
    }
  };

  // 歌曲点击按钮
  TurnMusic = (index) => {
    let historyList = this.state.historyList;
    historyList.push(this.state.MusicList[index]);
    if (this.state.MusicList[index] !== undefined) {
      // 先关闭音乐
      const audio = document.getElementById('MusicAudioId');
      audio.pause();
      // 请求音乐数据
      Axios.create({
        baseURL: `${webSite}:3003`,
      })
        .post('/gethttpMusci', { id: this.state.MusicList[index].musicId })
        .then((err) => {
          if (err.data.code === 'M0003') {
            this.setState(
              {
                httpMusci: err.data.url,
                // 获取歌曲封面
                Album: err.data.img,
              },
              () => {
                // 开启音乐
                this.lightPlay(true);
              }
            );
          }
        })
        .catch(() => {
          message.error({ content: '网络错误', className: 'bulletChatMessage' });
        });
      this.setState({
        indexMusicList: index,
        // 存储一下下标
        GetindexMusicList: index,
        // 设置历史记录
        historyList,
      });
      // 同步title
      document.title = `正在播放：${this.state.MusicList[index].musicUser}`;
      // 获取歌曲歌词
      Axios.create({
        baseURL: `${webSite}:3003`,
      })
        .post('/GetMusicAlbum', { MusicId: this.state.MusicList[index].musicId })
        .then((err) => {
          // 获取到的歌词赋值给页面
          this.setState({
            lyric: err.data.data.lrc.lyric,
          });
        })
        .catch(() => {
          message.error({ content: '网络错误', className: 'bulletChatMessage' });
        });
    }
  };

  // 滑动进度条
  touchmoveSpan = (event) => {
    // 获取小按钮
    let ba = document.getElementById('lightMusciBloss');
    // 获取进度条长度
    let span = document.getElementsByClassName('lightMusic_button_mkpgb')[0];
    // 获取手机按压屏幕的x轴位置
    let touch = event.targetTouches[0];
    // 使用屏幕总长度 - 手机在屏幕 x 轴的位置 - 进度条的长度
    let leftval = document.body.offsetWidth - touch.clientX - span.offsetWidth;
    // 把手指移动的距离赋值给span的left
    ba.style.left = -leftval + 'px';
    if (-leftval <= 0) {
      ba.style.left = '0px';
    } else if (-leftval >= span.offsetWidth) {
      ba.style.left = span.offsetWidth + 'px';
    }
    if (-leftval <= span.offsetWidth) {
      // 更改音乐进度
      const audio = document.getElementById('MusicAudioId');
      // 获取进度
      let audioTion = (-leftval / span.offsetWidth) * audio.duration;
      audio.currentTime = audioTion;
    }
  };

  // 设置歌词页面的移动
  // 滑动进度条
  touchmoveLightMusicModal = (event) => {
    // 获取小按钮
    let ba = document.getElementsByClassName('lightMusicModal')[0];
    // 获取手机按压屏幕的x轴位置
    let touch = event.targetTouches[0];
    // 要移动的位置 = 手机屏幕宽度 - 手指的位置
    let leftval = document.body.offsetWidth - touch.clientX;
    // // 把手指移动的距离赋值给span的left
    ba.style.left = -leftval + 35 + 'px';
    ba.style.top = touch.clientY - 35 + 'px';
  };
  // 渲染页面
  render() {
    let { isAutoPlay, lightOrder, httpMusci } = this.state;
    // 音乐链接
    return (
      <div className="lightMusic" id="lightMusicId">
        {/* 头部 */}
        <ul className="lightMusic_head">
          {this.state.current.map((list, index) => {
            return (
              <li
                key={index}
                onClick={() => {
                  // 设置下标
                  this.setState({
                    index,
                  });
                }}
                className={this.setClass(index)}>
                {list}
              </li>
            );
          })}
        </ul>
        {/* 内容 */}
        <ul className="lightMusic_body">{this.truePlay()}</ul>
        <audio
          src={httpMusci}
          controls="controls"
          style={{ display: 'none' }}
          id="MusicAudioId"
          autoPlay={this.state.SetAutoPlay}
          onTimeUpdate={this.timeUpdateMusic}
          onEnded={this.EndedMusic}>
          您的浏览器不支持 autoPlay
        </audio>
        {/* 底部 */}
        <div className="lightMusic_button">
          <div className="lightMusic_button_kong">
            {/* 底部的所有按钮 */}
            {/* 上一曲 */}
            <span className="player-btn btn-prev" onClick={this.lightPrev}></span>
            {/* 开启关闭按钮 */}
            {isAutoPlay ? (
              <span
                className="player-btn btn-play btn-state-paused"
                onClick={() => this.lightPlay(false)}></span>
            ) : (
              <span className="player-btn btn-play" onClick={() => this.lightPlay(true)}></span>
            )}
            {/* 下一曲 */}
            <span className="player-btn btn-next" onClick={this.lightNext}></span>
            {/* 播放方式 */}
            {
              // 单曲循环
              lightOrder === 1 ? (
                <span
                  className="player-btn btn-order btn-order-single"
                  onClick={() => this.lightOrder(1)}></span>
              ) : // 随机播放
              lightOrder === 2 ? (
                <span
                  className="player-btn btn-order btn-order-random"
                  onClick={() => this.lightOrder(2)}></span>
              ) : (
                // 列表循环
                <span className="player-btn btn-order" onClick={this.lightOrder}></span>
              )
            }
          </div>
          <div className="lightMusic_button_speed">
            <div className="lightMusic_button_mkpgb">
              <span
                className="lightMusic_button_mkpgb_span"
                id="lightMusciBloss"
                onTouchMove={this.touchmoveSpan}></span>
            </div>
            {/* 进度条 */}
            <div
              className="lightMusic_button_mkpgb"
              style={{ background: 'rgb(214, 214, 214)', width: '0' }}></div>
          </div>
        </div>
      </div>
    );
  }
}
